<template>
  <div class="recommond w-100 pt-4">
    <leftTitle title="推荐歌单" />
    <!--传参除了字符串之外必须在属性前加冒号-->
    <div class="coverList w-100 d-flex jc-between flex-wrap">
      <div
        class="coverItem"
        @click="handleToMusicList(item)"
        v-for="(item,index) in coverList"
        :key="index"
      >
        <div class="coverPic" :style="{background: 'url('+item.coverUrl+')'}">
          <div class="count">{{item.count | formatPlayCount}}</div>
        </div>
        <div class="coverTitle d-flex flex-nowrap fs-md">{{item.title}}</div>
      </div>
    </div>
    <leftTitle title="最新音乐" />

    <songs :musicList="newSongs" v-if="this.newSongs.length" />
    <!--当获取数据才自动刷新视图 this.$forceUpdate();-->
  </div>
</template>
 
<script>
import { getPersonalized, getPersonalizedNewsong } from "@/api/personalized";

import { formatPlayCount } from "@/utils/filters/count.js";
import leftTitle from "./leftTitle";
import songs from "./songs";
export default {
  name: "vueName",
  data() {
    return {
      coverList: [],
      newSongs: []
    };
  },
  components: {
    leftTitle: leftTitle,
    songs: songs
  },
  filters: {
    formatPlayCount
  },
  methods: {
    handleToMusicList(item) {
      this.$router.push("/musiclist/" + item.id);
    }
  },
  created() {
    getPersonalized({ limit: 6 }).then(res => {
      res.data.result.forEach((item, index) => {
        this.coverList.push({
          id: item.id,
          coverUrl: item.picUrl,
          count: item.playCount,
          title: item.name
        });
      });
    });
    getPersonalizedNewsong().then(res => {
      res.data.result.forEach((item, index) => {
        // console.log(item)
        this.newSongs[index] = {
          title: item.name,
          dsc: item.song.album.name,
          id: item.id,
          al: item.song.alias[0],
          picUrl: item.picUrl
        };
        let authors = [];
        item.song.artists.forEach((item1, index1) => {
          //将对象数组转换成字符串数组 然后再把字符串数组用/拼接起来
          //[{id:1,name:'张三'},{id:2,name:'李四'}] => ["张三","李四"]

          // let arr = [
          //   { id: 1, name: "张三" },
          //   { id: 2, name: "李四" }
          // ];
          // let arr1 = [];
          // let authors = "";
          // arr.forEach((item, index) => {
          //   arr1.push(item.name);
          // });
          // authors = arr1.join(".");
          // console.log(authors);

          authors.push(item1.name);
        });
        //外层循环给this.newSongs赋值的第index项
        this.newSongs[index].authors = authors.join("/");
      });
      this.$forceUpdate(); //vue视图强制更新
      // m v vm
    });
  }
};
</script>
 
<style scoped lang = "scss">
.recommond {
  .coverList {
    .coverItem {
      width: 32.9%;
      margin-bottom: 16px;
      .coverPic {
        background-size: contain !important;
        width: 100%;
        padding-bottom: 100%;
        position: relative;
        &::before {
          content: "";
          position: absolute;
          width: 100%;
          height: 100%;
          background-image: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.2),
            rgba(0, 0, 0, 0)
          );
        }
        .count {
          color: #fff;
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 18px;
          z-index: 9;
          background-image: linear-gradient(
            90deg,
            rgba(0, 0, 0, 0),
            rgba(0, 0, 0, 0.2)
          );
          display: flex;
          justify-content: flex-end;
          align-items: center;
          &::before {
            content: "";
            width: 100%;
            height: 18px;
            display: block;
            z-index: 999;
            width: 16px;
            height: 14px;
            background-size: contain !important;
            background: url("~assets/img/earphone.png") no-repeat;
          }
        }
      }
      .coverTitle {
        padding: 6px 2px 0px 6px;
        box-sizing: border-box;
        overflow: hidden;
        @include ellipsis(2);
      }
    }
  }
}
</style>